import 'package:flutter/material.dart';
import 'package:flutter_components_web/components/shared/com_fade_in.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../shared/com_hover.dart';
import '../shared/com_skeleton.dart';

class ComSkeletonPage extends StatefulWidget {
  const ComSkeletonPage({super.key});

  @override
  State<ComSkeletonPage> createState() => _ComSkeletonPageState();
}

class _ComSkeletonPageState extends State<ComSkeletonPage> {
  late List<int> list;
  late bool loading;

  @override
  void initState() {
    list = List.generate(100, (index) => index);
    loading = true;
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        loading = !loading;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: 1.sw,
        child: Wrap(
          runSpacing: 10.r,
          spacing: 10.r,
          alignment: WrapAlignment.center,
          children:
              list.map((e) {
                return ComSkeleton(
                  isLoading: loading,
                  width: 200.r,
                  height: 200.r,
                  child: _buildItem(e),
                );
              }).toList(),
        ),
      ),
    );
  }

  _buildItem(int index) {
    return ComFadeIn(
      offset: Offset(0, -10),
      child: ComHover(
        hoverColor: Colors.black26,
        child: Container(
          alignment: Alignment.center,
          color: Colors.blue.withValues(alpha: 0.1),
          width: 200.r,
          height: 200.r,
          padding: EdgeInsets.all(10),
          child: Text("$index"),
        ),
      ),
    );
  }
}
